<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo - MessengerJS</title>
    <script src="/MessengerJS-master/messenger.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <style>
        iframe {
            margin: 10px;
            margin-left: 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Demo of MessengerJS</h1>
        <p class="lead"><a href="http://biqing.github.io/MessengerJS/">Github project page</a></p>
        <p>
            <span class="label label-danger">parent</span>
            Domain of the parent page
            <script>document.write('(' + location.protocol + '//' + location.host + ')');</script>
        </p>
        <p>
            <iframe id="iframe1" src="http://127.0.0.1:8082/MessengerJS-master/demo/iframe1.html" width="550px"
                height="300px"></iframe>
            <iframe id="iframe2" src="http://127.0.0.1:8082/MessengerJS-master/demo/iframe2.html" width="550px"
                height="300px"></iframe>
        </p>

        <p>
            <input type="text" placeholder="输入消息" id="message" />
            <button type="button" class="btn btn-primary" onclick="sendMessage('iframe1');">send to iframe1</button>
            <button type="button" class="btn btn-primary" onclick="sendMessage('iframe2');">send to iframe2</button>
            <button type="button" class="btn btn-success" onclick="sendAll();">send to all</button>
            <button type="button" id="child" class="btn btn-info" onclick="openWindow();">open a window</button>
        </p>
        <pre id="output" class="alert alert-warning"></pre>
    </div>
    <script>
        var messenger = new Messenger('parent', 'MessengerDemo'),
            iframe1 = document.getElementById('iframe1'),
            iframe2 = document.getElementById('iframe2'),
            input = document.getElementById('message');

        messenger.listen(function (msg) {
            var newline = '\n';
            var text = document.createTextNode(msg + newline);
            document.getElementById('output').appendChild(text);
        });

        messenger.addTarget(iframe1.contentWindow, 'iframe1');
        messenger.addTarget(iframe2.contentWindow, 'iframe2');

        function sendMessage(name) {
            var msg = input.value;
            messenger.targets[name].send("message from parent: " + msg);
            input.value = '';
        }

        function sendAll() {
            var msg = input.value;
            messenger.send("message from parent: " + msg);
            input.value = '';
        }

        function openWindow() {
            var outerWindow = window.open("http://biqinglabs.duapp.com/messenger/child.html", "_blank", "width=603,height=489,location=yes,status=yes,toolbar=no,resizable=no");
            messenger.addTarget(outerWindow, 'childWindow');
            document.getElementById("child").innerHTML = "send to child window";
            document.getElementById("child").onclick = function () {
                sendMessage('childWindow');
            };
        }
    </script>
</body>

</html>